import React from 'react';
import { Tree } from 'antd';

import styles from './index.module.less';

const TreeNode = Tree.TreeNode;


export default class ShopSell extends React.Component {
  state={
    categoryList: [
      {
        key: 1,
        title: 'PVC塑料',
        num: 5,
        category: [
          { index: 1, title: 'PVC塑料', num: 2 },
          { index: 2, title: 'PVC塑料', num: 3 },
        ],
      },
      {
        key: 2,
        title: 'PE塑料',
        num: 6,
        category: [
          { index: 1, title: 'PVC塑料', num: 2 },
          { index: 2, title: 'PVC塑料', num: 3 },
        ],
      },
      {
        key: 3,
        title: 'PE塑料',
        num: 5,
        category: [
          { index: 1, title: 'PVC塑料', num: 2 },
          { index: 2, title: 'PVC塑料', num: 3 },
        ],
      },
    ],
  }
  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  }
  render() {
    const { categoryList } = this.state;
    return (
      <div className={styles.categoryBox}>
        {/* 商品分类 */}
        <div className={styles.text1}>商品分类</div>
        <div className={styles.text2}>全部分类 (9)</div>
        <Tree
          showLine
          defaultExpandedKeys={[ '0-0-0' ]}
          onSelect={this.onSelect}
        >
          {categoryList.map((item, index) => {
            return (
              <TreeNode title={item.title + item.num} key={item.key} >
                {
                  item.category !== null && item.category.map(iem => {
                    return (
                      <TreeNode className={styles.box} title={iem.title + iem.num} key={iem.index}/>
                    );
                  })
                }
              </TreeNode>
            );
          })}
        </Tree>
      </div>
    );
  }
}
